<template>
<keep-alive>
  <div class="container">
    <el-tabs v-model="activeName"  @tab-click="handleClick" >
    <el-tab-pane label="新闻" name="first">
       <div id="main">
      <div class="elementa" v-for="(item, i) in menu" :key='i'>
        <router-link :to="{path:'/ShouMain',query:{name:menu[i].name,content:menu[i].content}}"  >
        <h4>新闻</h4>
        <div class="content">{{menu[i].content}}</div><br>
        <span>{{menu[i].name}}</span>
        </router-link>
      </div>
    </div>
    </el-tab-pane>
    <el-tab-pane label="管理员管理文章" name="fifth" >
      <!-- 题目：<el-input
  type="text"
  placeholder="请输入题目"
  v-model="input.content"
  maxlength="20"
  :autosize="{ minRows: 8, maxRows: 20}"
  show-word-limit
>
</el-input> -->
<el-input
  type="textarea"
  :autosize="{ minRows: 2, maxRows: 20}"
  placeholder="请输入题目"
  v-model="textarea1">
</el-input><br><br>
<el-input
  type="textarea"
  :autosize="{ minRows: 14, maxRows: 20}"
  placeholder=textarea2
  v-model="textarea2">
  </el-input>
  <br><br>
      <el-button @click="addNotify"> 提交</el-button>
    </el-tab-pane>
  </el-tabs>
   </div>
</keep-alive>
</template>

<script>
import http from '../../utils/http'
export default {
  name: 'ShouYe',
  mounted () {
    this.getData()
  },
  data () {
    return {
      textarea1: '',
      textarea2: '请输入内容',
      input: {
        name: '',
        content: ''
      },
      activeName: 'first',
      menu: [
        { content: ' ',
          name: ''
        }
      ],
      menu1: [
        { content: '',
          name: ''
        }
      ],
      menu2: [
        { content: '',
          name: ''
        }
      ],
      menu3: [
        { content: '',
          name: ''
        }
      ],
      menu4: [
        { content: '',
          name: ''
        }
      ],
      options: [{
        value: '通知公告',
        label: '通知公告'
      }, {
        value: '校园新闻',
        label: '校园新闻'
      }, {
        value: '我i科大',
        label: '我i科大'
      }, {
        value: '精彩校园',
        label: '精彩校园'
      }, {
        value: '事务中心类',
        label: '事务中心类'
      }],
      value: ''
    }
  },
  methods: {
    getData: function () {
      let that = this
      http({}, '/api/notifya').then(function (res) {
        that.menu = res.data
        console.log('menu', that.menu)
      })
      http({}, '/api/campusNotify').then(function (res) {
        that.menu1 = res.data
        console.log('menu', that.menu1)
      })
      http({}, '/api/loveNotify').then(function (res) {
        that.menu2 = res.data
        console.log('menu', that.menu1)
      })
      http({}, '/api/wonderfulNotify').then(function (res) {
        that.menu3 = res.data
        console.log('menu', that.menu1)
      })
      http({}, '/api/affairNotify').then(function (res) {
        that.menu4 = res.data
        console.log('menu', that.menu1)
      })
    },
    handleClick (tab, event) {
      console.log(tab, event)
    },
    addNotify: function () {
      let that = this
      if (this.value === '') {
        this.$message('请选择发布在哪个专栏')
        return
      }
      if (this.input.name === '' || this.input.content === '') {
        this.$message('请填写完整')
        return
      }
      switch (this.value) {
        case '通知公告':
          http(this.input, '/api/addNotify').then(function () {
            that.getData()
            that.input.name = ''
            that.input.content = ''
            that.$message('成功发布在' + that.value + '专栏')
          })
          break
        case '校园新闻':
          http(this.input, '/api/addCampus').then(function () {
            that.getData()
            that.input.name = ''
            that.input.content = ''
            that.$message('成功发布在' + that.value + '专栏')
          })
          break
        case '我i科大':
          http(this.input, '/api/addLove').then(function () {
            that.getData()
            that.input.name = ''
            that.input.content = ''
            that.$message('成功发布在' + that.value + '专栏')
          })
          break
        case '精彩校园':
          http(this.input, '/api/addWonderful').then(function () {
            that.getData()
            that.input.name = ''
            that.input.content = ''
            that.$message('成功发布在' + that.value + '专栏')
          })
          break
        case '事务中心类':
          http(this.input, '/api/addAffair').then(function () {
            that.getData()
            that.input.name = ''
            that.input.content = ''
            that.$message('成功发布在' + that.value + '专栏')
          })
          break
      }
    }
  }
}
</script>

<style scoped>
.container{
  line-height: 20px;
}
.elementa{
  background-color: white;
  border-radius: 24px
}
.elementa{
  padding: 20px;
  margin: 0px 0px 10px 0px;
}
.el-icon-plus{

  font-size: 30px;

}
.icon{
  padding:0px 20px 0px 0px;
  /* float: right; */
  cursor: pointer;
}
#main{
  height: 600px;
  overflow-x: hidden;
  overflow-y: scroll;
}
h4{
  padding: 0px;
  margin:0px 0px 5px 0px
}
a {
  text-decoration: none;
  color: black;
}
.router-link-active {
  text-decoration: none;
  color: black;
}
</style>
